<template>
  <div>
    <div v-if="_filterData.length > 0" class="attr-container">
      <div v-for="(item, index) in _filterData" :key="item.stastsId">
        <div class="attr-item mb20">
          <p>{{ item.statsTitle }}：</p>
          <el-checkbox-group v-model="filterVal[index]" size="small">
            <!-- 二级属性 -->
            <div v-for="(item2, index2) in item.children" class="attr-wrap" :key="index2">
              <el-checkbox
                :label="item2.statsTitle"
                :value="item2.stastsId"
                :key="item2.stastsId"
                @change="
                  val => {
                    changeAttr2(val, item, item2, index);
                  }
                "
              >
                <template #default>
                  <p class="attr2">{{ item2.statsTitle }}</p>
                </template>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div v-else style="display: flex; justify-content: center; width: 100%">
      <el-empty description="暂无数据" />
    </div>
    <!-- <el-button @click="getAttrL2">获取勾选的二级属性</el-button>
    <el-button @click="viewAttrL2">赋值回显</el-button> -->
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";

const emit = defineEmits(["update:isOpen", "changeAttr"]);
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  filterData: {
    type: Object,
    default: () => {}
  },
  goods: {
    //当前商品的详情，回显功能需要使用到
    type: Object,
    default: () => {}
  }
});

const brandIds = ref([]);
const _filterData = ref([]); //筛选的属性值
const _filterDataCopy = ref([]); //筛选的属性值
const filterVal = ref([]); //用户选中的筛选属性值
const filterVal3 = ref([]); //用户选中的3级筛选属性值

watch(
  () => props.filterData,
  val => {
    _filterData.value = JSON.parse(JSON.stringify(val));
    _filterDataCopy.value = JSON.parse(JSON.stringify(val));

    // console.log("当前的商品===", props.goods);
    // console.log("filterData===", val);

    /**回显 */
    if (props.goods?.statsList?.length > 0) {
      review();
    }
  },
  { deep: true }
);
const _isOpen = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

const review = () => {
  const Arr = [];
  const haveIds = props.goods?.statsList?.map(item => item.stastsId) || [];
  props.filterData?.map((item, index) => {
    if (haveIds?.includes(item.stastsId)) {
      const objArr = props.goods?.statsList?.filter(o => o.stastsId === item.stastsId) || [];
      const valIds = objArr?.map(o => o.stastsValId);
      Arr[index] = valIds;
    }
  });
  filterVal.value = Arr;
};

const getAttrL2 = () => {
  const arr = [];
  _filterData.value?.map(item => {
    const ids2Arr = item?.children?.map(_item => _item.stastsId) || [];
    filterVal.value?.flat()?.map(val => {
      if (ids2Arr?.includes(val)) {
        arr.push({ ...item, stastsValId: val });
      }
    });
  });

  const arr2 = [];
  arr?.map(item => {
    const obj = item.children?.find(obj => obj.stastsId === item.stastsValId);
    arr2.push({
      stasType: item.stasType,
      stastsId: item.stastsId,
      stastsName: item.statsTitle,
      stastsVal: obj.statsTitle,
      stastsValId: item.stastsValId
    });

    // const arr2StastsIds = arr2?.map(obj => obj.stastsId);
    // if (arr2StastsIds?.includes(item.stastsId)) {
    //   arr2?.map(obj => {
    //     if (obj.stastsId === item.stastsId) {
    //       const _obj = item.children?.find(obj => obj.stastsId === item.stastsValId);
    //       obj.stastsVal = obj.stastsVal + "," + _obj.statsTitle;
    //       obj.stastsValId = obj.stastsValId + "," + item.stastsValId;
    //     }
    //   });
    // } else {
    //   const obj = item.children?.find(obj => obj.stastsId === item.stastsValId);
    //   arr2.push({
    //     stasType: item.stasType,
    //     stastsId: item.stastsId,
    //     statsName: item.statsTitle,
    //     stastsVal: obj.statsTitle,
    //     stastsValId: item.stastsValId
    //   });
    // }
  });
  console.log("当前勾选的二级属性", filterVal.value);
  console.log("当前勾选的二级属性222222", arr2);
  return arr2;
};

const viewAttrL2 = () => {
  filterVal.value = [["1890231376996790272"], [], ["1818242972588351512", "1818242972588351497"]];
};

const reset = () => {
  _filterData.value = JSON.parse(JSON.stringify(_filterDataCopy.value));
  filterVal.value = [];
  filterVal3.value = [];
  brandIds.value = [];
  console.log("清空选中的值");
};

//2级属性筛选
const changeAttr2 = (val, item, item2, index) => {
  // console.log('这是2级属性筛选===', item.children, filterVal.value)

  //二级选中的属性id重新排序，按照接口返回的属性顺序排
  let sortArr = [];
  filterVal.value.map((arr, i) => {
    if (index === i) {
      let Arr = [];
      if (arr) {
        for (let ids of arr) {
          const _index = item.children.findIndex(child => child.stastsId == ids);
          if (_index >= 0) {
            Arr[_index] = ids;
          }
        }
      }
      sortArr[index] = Arr;
    }
  });
  filterVal.value[index] = sortArr[index];

  if (!val) {
    item2.select3 = [];
  }

  let ARR = [];
  for (let attr1 of _filterData.value) {
    for (let attr2 of attr1.children) {
      if (attr2.select3 && attr2.select3?.length > 0) {
        attr2.select3.map(obj => {
          ARR.push(attr2.stastsId + "-" + obj);
        });
      }
    }
  }
  filterVal3.value = ARR;
};

// 3级属性筛选
const changeAttr3 = (val, item, item2, index, index2) => {
  console.log("这是3级属性筛选===", item2);
  if (val) {
    //任意选中一个3级属性，默认选中对应的二级属性
    console.log(9090909090, filterVal.value, index, index2);
    filterVal.value[index] = filterVal.value[index] || [];
    filterVal.value[index][index2] = item2.stastsId;
  }

  let ARR = [];
  for (let attr1 of _filterData.value) {
    for (let attr2 of attr1.children) {
      if (attr2.select3 && attr2.select3?.length > 0) {
        attr2.select3.map(obj => {
          ARR.push(attr2.stastsId + "-" + obj);
        });
      }
    }
  }
  filterVal3.value = ARR;
};

const cancelClick = () => {
  _isOpen.value = false;
  reset();
  emit("changeAttr", { filterVal: filterVal.value, filterVal3: filterVal3.value, brandIds: brandIds.value });
};
const confirmClick = () => {
  _isOpen.value = false;
  emit("changeAttr", { filterVal: filterVal.value, filterVal3: filterVal3.value, brandIds: brandIds.value });
};

defineExpose({ reset, getAttrL2 });
</script>

<style lang="scss">
h4 {
  margin: 0;
  padding: 0;
}
.my-drawer {
  .el-drawer {
    box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
    border-radius: 10px 0px 0px 10px;
  }
  .el-drawer__header {
    font-size: 18px;
    color: #131414;
    margin-bottom: 0px;
    padding-bottom: 16px;
    border: 1px solid #d8d8d8;
    h4 {
      font-weight: normal;
      position: relative;
      padding-left: 14px;
      &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 6px;
        width: 6px;
        height: 6px;
        background-color: #409eff;
        border-radius: 50%;
      }
    }
  }
  .attr-container {
    padding: 20px;
    padding-bottom: 0;
  }
  .el-drawer__footer {
    text-align: center !important;
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    padding: 14px 20px;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/styles/index";
p,
h1 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  color: #3d3d3d;
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;

  .attr-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    min-height: 32px;
    padding: 1px 8px;
    margin-bottom: 4px;

    &:not(:last-of-type) {
      margin-right: 8px;
    }
  }
}

:deep(.el-checkbox.el-checkbox--small.is-bordered) {
  height: auto;
  height: 32px;

  .el-checkbox__label {
    .attr-wrap {
      display: flex;
      align-items: center;
    }
  }
}

.attr-item {
  & > p {
    min-width: 60px;
    color: #86909c;
    font-size: 14px;
    margin-bottom: 10px;
  }
}
</style>
